<script setup lang="ts">
import { ref, watch } from "vue"
import { useRouter } from 'vue-router'

import { navArr } from '@/utils/home-nva'
import HomeComponent from '@/components/HomeComponent.vue'
import HomeHot from '@/components/HomeHot.vue'
import HomeIsPn from '@/components/HomeIsPn.vue'

const tabChoiceArr = ref([])

const myData = ref({
  "mid": 341160154,
  "name": "88032163881_bili",
  "sex": "保密",
  "face": "http://i0.hdslb.com/bfs/face/member/noface.jpg",
  "face_nft": 0,
  "face_nft_type": 0,
  "sign": "",
  "rank": 5000,
  "level": 0,
  "jointime": 0,
  "moral": 0,
  "silence": 0,
  "coins": 0,
  "fans_badge": false,
  "fans_medal": {
    "show": false,
    "wear": false,
    "medal": null
  },
  "official": {
    "role": 0,
    "title": "",
    "desc": "",
    "type": -1
  },
  "vip": {
    "type": 0,
    "status": 0,
    "due_date": 0,
    "vip_pay_type": 0,
    "theme_type": 0,
    "label": {
      "path": "",
      "text": "",
      "label_theme": "",
      "text_color": "",
      "bg_style": 0,
      "bg_color": "",
      "border_color": "",
      "use_img_label": true,
      "img_label_uri_hans": "",
      "img_label_uri_hant": "",
      "img_label_uri_hans_static": "https://i0.hdslb.com/bfs/vip/d7b702ef65a976b20ed854cbd04cb9e27341bb79.png",
      "img_label_uri_hant_static": "https://i0.hdslb.com/bfs/activity-plat/static/20220614/e369244d0b14644f5e1a06431e22a4d5/KJunwh19T5.png"
    },
    "avatar_subscript": 0,
    "nickname_color": "",
    "role": 0,
    "avatar_subscript_url": "",
    "tv_vip_status": 0,
    "tv_vip_pay_type": 0
  },
  "pendant": {
    "pid": 0,
    "name": "",
    "image": "",
    "expire": 0,
    "image_enhance": "",
    "image_enhance_frame": ""
  },
  "nameplate": {
    "nid": 0,
    "name": "",
    "image": "",
    "image_small": "",
    "level": "",
    "condition": ""
  },
  "user_honour_info": {
    "mid": 0,
    "colour": null,
    "tags": []
  },
  "is_followed": false,
  "top_photo": "http://i1.hdslb.com/bfs/space/cb1c3ef50e22b6096fde67febe863494caefebad.png",
  "theme": {},
  "sys_notice": {},
  "live_room": null,
  "birthday": "",
  "school": {
    "name": ""
  },
  "profession": {
    "name": "",
    "department": "",
    "title": "",
    "is_show": 0
  },
  "tags": null,
  "series": {
    "user_upgrade_status": 3,
    "show_upgrade_window": false
  },
  "is_senior_member": 0,
  "mcn_info": null,
  "gaia_res_type": 0,
  "gaia_data": null,
  "is_risk": false,
  "elec": {
    "show_info": {
      "show": false,
      "state": -1,
      "title": "",
      "icon": "",
      "jump_url": ""
    }
  },
  "contract": null
})

const rid = ref('24')

const router = useRouter()

const isPn = ref(false)

const active = ref(0)

const actived = ref(0)

const scrollBottom = (e: Event) => {
  console.log('**** 到底了 ! ****')
}

const goToRankingAll = (rid: string) => {
  router.push(`/ranking/${rid}`)
}

const test = async (e: any, name: string) => {
  if (e.title === '推荐' || name === '推荐') {
    isPn.value = false
  } else {
    isPn.value = true
  }
  console.log(e)
}

watch(actived, () => {

})

localStorage.setItem('myData',JSON.stringify( myData.value))

</script>

<template>
  <div>
    <div class="relative">
      <van-tabs v-model:active="active" color="#fb7299" title-active-color="#fb7299" :line-height="2" :sticky="true"
        offset-top="44px" class=" relative" swipeable>
        <van-tab title="首页">
          <div class=" px-1 mb-5">
            <HomeHot />
          </div>
        </van-tab>
        <van-tab :title="item.title" v-for="item in navArr" :key="item.title">
          <van-tabs v-model:active="actived" color="#fb7299" :line-height="2" title-active-color="#fb7299"
            @click-tab="test">
            <van-tab :title="r.name" v-for="r in item.type" :key="r.rid">
              <div v-show="isPn" class=" px-1 mb-5">
                <HomeIsPn :rid="r.rid" />
              </div>
            </van-tab>
          </van-tabs>
          <div v-for="(r, index) in item.type" :key="r.rid" class=" px-1 mb-5" v-show="!isPn">
            <div class=" flex justify-between px-1 py-2">
              <div>{{ r.name }}</div>
              <div style=" color: #ffa726;" v-if="r.name === '推荐' && r.rid !== '33'" @click="goToRankingAll(r.rid)">
                <span class="iconfont icon-PCbofangye_paihangbang"></span>排行榜<span>
                  <van-icon name="arrow" />
                </span>
              </div>
              <div class=" text-neutral-400" @click="actived = index, test('', r.name)" v-else-if="r.rid !== '33'">
                查看更多<span>
                  <van-icon name="arrow" />
                </span></div>
            </div>
            <KeepAlive>
              <HomeComponent @scroll="scrollBottom" :isPn="isPn" :typename="r.name" :rid="r.rid" />
            </KeepAlive>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
